<template>
	<view class="">
		<view class="topboxs">
			<image class="kmh_text" src="/static/homeNav/kmh_text.png" mode=""></image>
			<view class="shijian">
				时间：{{taskData.startTime}} ~ {{taskData.endTime}}
			</view>
			<view class="d-flex a-item-c p-l-r-20  ">
				<view class="">
					进度：
				</view>
				<u-line-progress :percentage="taskData.totalProgress" height="18"
					activeColor="#ff0000"></u-line-progress>
			</view>
			<view class="mubiao m-t-10">
				优先级：{{taskData.priorityText}}
			</view>
			<view class="zhankai" @click="handleMore">
				<image :class="more?'rotate-image':''" src="/static/homeNav/renwu/xiajt.png" mode=""></image>
			</view>
		</view>
		<template v-if="more">
			<view class="box-2">
				<u--form>

					<u-form-item label="任务内容" prop="name" labelWidth="260" labelPosition="top">
						<view class="m-t-10 width-100 box-1">
							{{taskData.content}}
						</view>
					</u-form-item>
					<u-form-item label="任务目标" prop="name" labelWidth="260" labelPosition="top">
						<view class="m-t-10 width-100 box-1">
							{{taskData.jzzxTasksGoal.goalName}}
						</view>
					</u-form-item>
					<u-form-item label="任务说明" prop="name" labelWidth="260" labelPosition="top">
						<view class="m-t-10 width-100 box-1">
							{{taskData.description}}
						</view>
					</u-form-item>
				</u--form>

			</view>
		</template>
		<template v-else>
			<view class="wanchengboxs">
				<view @click="changeswip(1)" :class="wctype==1?'wwcselect':'wwcnoselect'">
					未完成
				</view>
				<view @click="changeswip(2)" :class="wctype==2?'ywcselect':'ywcnoselect'">
					已完成
				</view>
			</view>
			<view class="swiperboxs">
				<view class="swiper">
					<template v-if="rwlist.length>0">

						<view class="rwlistboxs" @click="handleDetail(item)" v-for="(item,index) in rwlist"
							:key="index">
							<view class="switemboxs">
								<view class="rwnamboxs">
									{{item.stageName}}
								</view>
								<view class="rwtimebox">
									{{item.startTime}} - {{item.endTime}}
								</view>
							</view>
							<view class="imgboxs">
								<image src="/static/homeNav/gengduo.png" mode=""></image>
							</view>
						</view>
					</template>

					<u-empty style="margin-top: 40rpx;" mode="data" v-else></u-empty>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import {
		selectMyTasks,
		selectPhaseTasks
	} from '@/common/api/renwu.js';
	export default {
		data() {
			return {
				more: false, //展开效果
				wctype: 1, //完成状态
				taskData: {
					startTime: '',
					endTime: '',

				},
				rwlist: [],

				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
				total: 0, // 总数据量（实际从接口获取）
				loading: false, // 加载中状态（防止重复请求）
				hasMore: true // 是否还有更多数据
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			changeswip(res) {
				console.log(res)
				this.wctype = res
				this.getData2()
			},
			chanegswp(res) {
				console.log(res.target.current)
				this.wctype = res.target.current + 1
			},
			handleMore() {
				this.more = !this.more
			},
			handleDetail(e) {
				let is_click = this.getTimeStr(e.startTime)
				uni.navigateTo({
					url: `/homeNav/wdrw/wdrw_achievement?step_id=${e.id}&task_id=${this.taskData.id}&is_click=${is_click}`
				})
			},
			// 时间大小 -来判断是否可操作
			getTimeStr(startTimeStr) {
				const startTime = new Date(startTimeStr);

				// 2. 获取当前时间
				const currentTime = new Date();

				// 3. 比较时间（时间戳比较，单位：毫秒）
				if (startTime.getTime() > currentTime.getTime()) {
					console.log("开始时间大于当前时间");
					return true;
				} else {
					console.log("开始时间小于或等于当前时间");
					return false;
				}
			},

			// 任务
			async getData() {
				try {
					let params = {
						sourceType: 0, //（0 开门红业务 1 任务业绩）
						pageNum: this.pageNum, // 当前页码
						pageSize: this.pageSize, // 每页条数
					}
					let res = await selectMyTasks(params)
					console.log(res, '-----任务')
					if (res.data.records.length > 0) {
						this.taskData = res.data.records[0]
						this.getData2()
					}

				} catch (error) {
					//TODO handle the exception
				}
			},
			// 阶段任务
			async getData2(status) {
				try {
					let params = {
						id: this.taskData.id,
						sourceType: 0, //（0 开门红业务上报 1 我的任务业绩上报）
						status: this.wctype,
						pageNum: 1, // 当前页码
						pageSize: 200, // 每页条数
					}
					let res = await selectPhaseTasks(params)
					this.rwlist = res.data.records
					console.log(this.rwlist, '-----阶段')
				} catch (error) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #eee;
	}
</style>
<style scoped lang="scss">
	.topboxs {
		position: relative;
		width: 100%;
		background-color: #ffffff;
		padding: 25rpx 0 40rpx 0;

		image {
			width: 80rpx;
			height: 40rpx;
			display: block;
			margin: 0rpx auto;
		}

		.shijian {
			font-size: 26rpx;
			margin-left: 20rpx;
			padding: 20rpx 0;
		}

		.mubiao {
			font-size: 26rpx;
			margin-left: 20rpx;
		}
	}

	.wanchengboxs {
		width: 94%;
		display: flex;
		align-items: center;
		margin-left: 3%;
		margin-top: 20rpx;

		.wwcselect {
			width: 120rpx;
			border-bottom: 4rpx solid #a31010;
			text-align: center;
			padding-bottom: 6rpx;
			margin-left: 20rpx;
		}

		.wwcnoselect {
			width: 120rpx;
			border-bottom: 4rpx solid #eeeeee;
			text-align: center;
			padding-bottom: 6rpx;
			margin-left: 20rpx;
		}

		.ywcselect {
			width: 120rpx;
			border-bottom: 4rpx solid #a31010;
			text-align: center;
			padding-bottom: 6rpx;
			margin-left: 40rpx;
		}

		.ywcnoselect {
			width: 120rpx;
			border-bottom: 4rpx solid #eeeeee;
			text-align: center;
			padding-bottom: 6rpx;
			margin-left: 40rpx;
		}
	}

	.swiperboxs {
		width: 100%;
		height: 1200rpx;

		.swiper {
			width: 100%;
			height: 1200rpx;

			.rwlistboxs {
				width: 100%;
				background-color: #ffffff;
				border: 1px solid #b6b6b6;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 60rpx;
				margin-top: 20rpx;

				.switemboxs {
					// width: 65%;
					flex: 1;

					.rwnamboxs {
						font-size: 32rpx;
						margin-left: 20rpx;
						margin-top: 30rpx;
					}

					.rwtimebox {
						font-size: 26rpx;
						margin-left: 20rpx;
						margin-top: 30rpx;
					}
				}

				.imgboxs {
					width: 10%;

					image {
						width: 30rpx;
						height: 30rpx;
						// margin-left: 160rpx;
						margin-top: 30rpx;
					}
				}
			}
		}
	}

	.zhankai {
		position: absolute;
		right: 6%;
		bottom: 10%;

		image {
			width: 32rpx;
			height: 32rpx;

		}

		.rotate-image {
			transform: rotate(180deg);
			// transform-origin: bottom center;
		}

	}

	.box-1 {
		border-radius: 16rpx;
		background-color: #eeeeee;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.box-2 {
		background-color: #fff;
		padding: 24rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
	}

	.kmh_text {
		width: 160rpx !important;
		height: 48rpx !important;
	}
</style>